<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1,user-scalable=no">
    <title>13下拉菜单和滚动监听插件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
    </style>
</head>

<body>

    <!-- 声明式用法的关键核心 外围容器使用 dropdown 内部dropdown声明式插件 菜单元素 dropdown-menu -->
    <div class="dropdown" id="dropdown">
        <!--  第一种方式 dropdown下拉列表css样式    dropdown声明式插件  -->
        <button class="btn btn-primary" data-toggle="dropdown" id="btn">
        <!-- <button class="btn btn-primary" id="btn"> -->
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>

    <!-- 滚动监听 用来根据滚动条所处在的位置自动更新导航项目 -->
    <nav class="navbar navbar-default" id="nav">
        <a href="#" class="navbar-brand">Web开发</a>
        <ul class="nav navbar-nav">
            <li><a href="#HTML5">HTML5</a></li>
            <li><a href="#Bootstrap">Bootstrap</a></li>
            <li class="dropdown">
                <a href="#" data-toggle="dropdown">JavaScript<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#jQuery">jQuery</a></li>
                    <li><a href="#Yui">Yui</a></li>
                    <li><a href="#Extjs">Extjs</a></li>
                </ul>
            </li>
        </ul>
    </nav>
   
    <!-- data-spy 设置滚动经过事件 还要做个相对定位 data-offset内容距滚动容器多少间距就高亮显示对应的菜单 -->
    <!-- data-target 设置监听的对象  否则多个的时候会被一起监听 -->
    <div id="content" data-offset="0" data-spy="scroll" data-target="nav" style="padding: 0 10px;height:200px;overflow: auto;position:relative;">
        <section class="sec">
            <!-- 移除事件 -->
            <h4 id="HTML5">HTML5<a href="#" onclick="removeSec(this)">删除</a></h4>
            <p>陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</p>        
        </section>
        <section class="sec">
            <h4 id="Bootstrap">Bootstrap</h4>
            <p>陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</p>
        </section>
        <section class="sec">
            <h4 id="jQuery">jQuery</h4>
            <p>陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</p>
        </section>
        <section class="sec">
            <h4 id="Yui">Yui</h4>
            <p>陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</p>
         </section>
         <section class="sec">
            <h4 id="Extjs">Extjs</h4>
            <p>陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</p> 
         </section>
    </div>

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script type="text/javascript">
        
        // 如果按钮在容器外部 可以通过data-target进行绑定
        // $('#btn').dropdown();
        // $('#dropdown').on('show.bs.dropdown',function(){
        //     alert('调用show方法时执行');
        // })

        // 脚本方式定义属性
        // $('#content').scrollspy({
        //     offset: 0,
        //     target: '#nav',
        // });

        // 事件绑定在导航上  
        // $('#nav').on('activate.bs.scrollspy',function(){
        //     alert('新条目被激活！');
        // })

            function removeSec(e){
                // 移除之后无法按到导航栏 所以需要刷新
                $(e).parents('.sec').remove();
                $('content').scrollspy('refresh');
            }

     </script>
</body>
</html>